{% load static %}
{% load rbac %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>路飞学城</title>
    {#    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">#}
    <link rel="shortcut icon" href="{% static 'imgs/luffy-study-logo.png' %} ">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %} "/>
    <link rel="stylesheet" href="{% static 'plugins/font-awesome/css/font-awesome.css' %} "/>
    <link rel="stylesheet" href="{% static 'css/commons.css' %} "/>
    <link rel="stylesheet" href="{% static 'css/nav.css' %} "/>
    <link rel="stylesheet" href="{% static 'rbac/css/rbac.css' %} "/>
    <style>
        body {
            margin: 0;
        }

        .no-radius {
            border-radius: 0;
        }

        .no-margin {
            margin: 0;
        }

        .pg-body > .left-menu {
            background-color: #EAEDF1;
            position: absolute;
            left: 1px;
            top: 48px;
            bottom: 0;
            width: 220px;
            border: 1px solid #EAEDF1;
            overflow: auto;
        }

        .pg-body > .right-body {
            position: absolute;
            left: 225px;
            right: 0;
            top: 48px;
            bottom: 0;
            overflow: scroll;
            border: 1px solid #ddd;
            border-top: 0;
            font-size: 13px;
            min-width: 755px;
        }

        .navbar-right {
            float: right !important;
            margin-right: -15px;
        }

        .luffy-container {
            padding: 15px;
        }

        .top-message-error {
            position: fixed;
            width: 400px;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            z-index: 1000;
        }

        .img-container {
            position: relative; /* 为子元素的绝对定位提供参考 */
            display: inline-block; /* 使容器宽度由图片宽度决定 */
        }

        .download-btn {
            position: absolute; /* 绝对定位，相对于父容器 */
            bottom: 10px; /* 距离图片底部的距离，可自行调整 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 微调水平位置，实现精准居中 */
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，让文字更清晰 */
            color: white; /* 文字颜色 */
            padding: 5px 10px; /* 内边距，调整按钮大小 */
            text-decoration: none; /* 去除下划线 */
            border-radius: 4px; /* 圆角，可根据喜好调整 */
        }

        table td, table th {
            text-align: center;
        }

        .table.table-bordered.align-middle td {
            vertical-align: middle !important;
        }

        /* 基础样式 */
        .check-all-container {
            {#padding: 10px;#}
            {#border: 1px solid #eee;#}
            {#border-radius: 6px;#}
            max-width: 300px;
        }

        /* 隐藏原生复选框 */
        .hidden-checkbox {
            display: none;
        }

        /* 全选文字样式 */
        .check-all-text {
            cursor: pointer;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 4px;
            margin-bottom: 10px;
            display: inline-block;
            transition: all 0.2s ease; /* 平滑过渡效果 */
            border: 1px solid #ddd;
        }

        /* 全选文字 - 未选中状态 */
        .check-all-text {
            color: #666;
            background-color: #fff;
        }

        /* 全选文字 - 选中状态（通过相邻兄弟选择器检测复选框状态） */
        #check-all:checked + .check-all-text {
            color: #fff;
            background-color: #2196F3;
            border-color: #2196F3;
            font-weight: 500;
        }

        /* 全选文字 - 悬停效果 */
        .check-all-text:hover {
            background-color: #f5f5f5;
        }

        #check-all:checked + .check-all-text:hover {
            background-color: #1976D2;
        }

        /* 选项文字样式 */
        .items-container {
            margin-top: 10px;
        }

        .item-text {
            display: block;
            cursor: pointer;
            padding: 4px 10px;
            margin: 4px 0;
            border-radius: 4px;
            color: #333;
            transition: background-color 0.2s;
        }

        .item-text:hover {
            background-color: #f9f9f9;
        }

        /* 选项选中状态 */
        .hidden-checkbox.item-check:checked + .item-text {
            background-color: #E3F2FD;
            color: #1976D2;
        }
    </style>

    {% block css %}{% endblock %}
</head>
<body>
<div class="pg-header">
    <div class="nav">
        <div class="logo-area left ">
            <a href="#">
                <img class="logo" src="{% static 'imgs/logo.svg' %}">
                <span style="font-size: 18px;">路飞学城 </span>
            </a>
        </div>

        <div class="left-menu left">
            <a class="menu-item">资产管理</a>
            <a class="menu-item">用户信息</a>
            <a class="menu-item">路飞管理</a>
            <div class="menu-item">
                <span>使用说明</span>
                <i class="fa fa-caret-down" aria-hidden="true"></i>
                <div class="more-info">
                    <a href="#" class="more-item">管他什么菜单</a>
                    <a href="#" class="more-item">实在是编不了</a>
                </div>
            </div>
        </div>

        <div class="right-menu right clearfix">

            <div class="user-info right">
                <a href="#" class="avatar">
                    <img class="img-circle" src="{% static 'imgs/default.png' %}">
                </a>

                <div class="more-info">
                    <a href="#" class="more-item">个人信息</a>
                    <a href="/logout/" class="more-item">注销</a>
                </div>
            </div>

            <a class="user-menu right">
                消息
                <i class="fa fa-commenting-o" aria-hidden="true"></i>
                <span class="badge bg-success">2</span>
            </a>

            <a class="user-menu right">
                通知
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
                <span class="badge bg-success">2</span>
            </a>

            <a class="user-menu right">
                任务
                <i class="fa fa-bell-o" aria-hidden="true"></i>
                <span class="badge bg-danger">4</span>
            </a>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="left-menu">
        <div class="menu-body">
            {% multi_menu request %}
        </div>
    </div>
    <div class="right-body">
        <div>
            {% breadcrumb request %}
        </div>
        {% block content %} {% endblock %}
    </div>
</div>


<script src="{% static 'js/jquery-3.3.1.min.js' %} "></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.js' %} "></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'rbac/js/rbac.js' %} "></script>

{% block js %}
    <script>
        // 全选逻辑
        document.addEventListener('DOMContentLoaded', function () {
            const checkAll = document.getElementById('check-all');
            const itemChecks = document.querySelectorAll('.item-check');

            // 全选/取消全选
            checkAll.addEventListener('change', function () {
                itemChecks.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });

            // 单个选项变化时同步全选状态
            itemChecks.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const allChecked = Array.from(itemChecks).every(cb => cb.checked);
                    checkAll.checked = allChecked;
                });
            });
        });
    </script>
{% endblock %}
</body>
</html>